<template>
  <div class="mod-config">
      <div class="avue-crud">
        <el-form label-width="140px">
        <el-divider>查询条件</el-divider>
        <el-row>
          <el-col :span="6">
            <el-form-item label="配镜单号" prop="billId">
              <el-input v-model="dataForm.billId" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="配镜部门" prop="deptName" >
              <el-input v-model="dataForm.deptName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="取镜部门" prop="takeMirroDeptName" >
              <el-input v-model="dataForm.takeMirroDeptName" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="顾客姓名" prop="name">
              <el-input v-model="dataForm.name" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="关联顾客卡" prop="customerCard">
              <el-input  v-model="dataForm.customerCard" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="联系电话" prop="phone1">
              <el-input v-model="dataForm.phone1" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="预计取镜时间" prop="takeMirroTime" >
              <el-input v-model="dataForm.takeMirroTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际取镜时间" prop="actulTakeMirroTime" >
              <el-input v-model="dataForm.actulTakeMirroTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="收银日期" prop="payTime">
              <el-input  v-model="dataForm.payTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际收银日期" prop="payTime">
              <el-input  v-model="dataForm.payTime" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="退款状态" prop="refundFlag">
              <el-input  v-model="dataForm.refundFlag" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实际退款时间" prop="refundTime">
              <el-input  v-model="dataForm.refundTime" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>

          <el-col :span="6">
            <el-form-item  label="邮寄状态(未查)" prop="aa">
              <el-input v-model="dataForm.aa" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="原价总金额" prop="originalPrice">
              <el-input  v-model="dataForm.originalPrice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="折扣金额" prop="discountPrice">
              <el-input  v-model="dataForm.discountPrice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="抹零金额" prop="removeprice">
              <el-input  v-model="dataForm.removeprice" readonly></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="应收金额" prop="receivablePrice">
              <el-input  v-model="dataForm.receivablePrice" readonly></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="实收金额" prop="paidPrice">
              <el-input  v-model="dataForm.paidPrice" readonly></el-input>
            </el-form-item>
          </el-col>

        </el-row>
        </el-form>
        <el-table :data="dataList" border v-loading="dataListLoading">
          <el-table-column prop="payeeUsername" label="收银人"></el-table-column>
          <el-table-column prop="createTime" label="收银日期"></el-table-column>
          <el-table-column  prop="createTime" label="实际收银日期"></el-table-column>
          <el-table-column prop="totalPrice" label="缴费金额"></el-table-column>
          <el-table-column prop="payStatus" label="付款状态" :formatter="payStatusFormatter"></el-table-column>
          <el-table-column prop="method" label="付款方式" :formatter="methodFormatter"></el-table-column>
        </el-table>
      </div>

      <div class="avue-crud__pagination">
        <el-pagination
          @size-change="sizeChangeHandle"
          @current-change="currentChangeHandle"
          :current-page="pageIndex"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          :total="totalPage"
          background
          layout="total, sizes, prev, pager, next"
        ></el-pagination>
      </div>
  </div>
</template>

<script>
  import { getInTransit,getPayInfo } from '@/api/eims/optician/glassesinfo'
  import { mapGetters } from "vuex";


export default {
  data() {
    return {
      dataForm: {
        key: ""
      },
      billId: '',
      dataList: [],
      searchShow: true,
      pageIndex: 1,
      pageSize: 100,
      totalPage: 0,
      dataListLoading: false,
      addOrUpdateVisible: false
    };
  },
  methods: {
    // 初始化数据
    init(id) {
      this.billId = id
      this.$nextTick(() => {
        this.getDataList()
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      getPayInfo(this.billId).then(response => {
        if(response.data.code == '0'){
          this.dataForm = response.data.data
          this.dataList = response.data.data.cashierRecordDTOList
        }else{
          this.$message.error(response.data.msg)
        }
        this.dataListLoading = false
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      this.getDataList();
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      this.getDataList();
    },
    payStatusFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return '未支付'
          break
        case "2":
          return '已支付'
          break
      }
    },
    methodFormatter(row, column, cellValue, index) {
      switch (cellValue) {
        case "1":
          return '现金'
          break
        case "2":
          return '积分'
          break
        case "3":
          return '储值卡'
          break
        case "4":
          return '银行卡'
          break
      }
    },
  }
};
</script>
